<template>
  <div>
    <h1>hello APP</h1>
    <!-- <TsButton @click="log" type="primary" size="large">hello1</TsButton> -->
    <!-- <TsCard styleCss="width: 18rem;"
      imgSrc="https://tse3-mm.cn.bing.net/th/id/OIP-C.VEhlSj01_sNxUEFpGYIPMwHaII?rs=1&pid=ImgDetMain">
      <template #card-title>card-title</template>
      <template #card-text>card-text</template>
      <template>
        <TsButton @click="log" type="primary" size="large">hello1</TsButton>
      </template>
    </TsCard> -->
    <TsTable :data="users">
      <TsTableCol prop="name" label="姓名"></TsTableCol>
      <TsTableCol prop="age" label="年龄"></TsTableCol>
      <TsTableCol prop="gender" label="性别"></TsTableCol>
    </TsTable>

    <div style="width: 800px;">
      <TsCarousel :data="data"></TsCarousel>
    </div>

  </div>
</template>
<script>

export default {
  data() {
    return {
      data: [{
        id: 1,
        src: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.9-uIZYwAQHLKoEXFFh0HAQHaEr?rs=1&pid=ImgDetMain',
        intro: 'Some representative placeholder content for the third slide.',
        title: 'Third slide label'
      }, {
        id: 2,
        src: 'https://wallup.net/wp-content/uploads/2016/01/98375-animals-cat.jpg',
        intro: 'Some representative placeholder content for the third slide.',
        title: 'Third slide label'
      }, {
        id: 3,
        src: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.9-uIZYwAQHLKoEXFFh0HAQHaEr?rs=1&pid=ImgDetMain',
        intro: 'Some representative placeholder content for the third slide.',
        title: 'Third slide label'
      }],
      users: [
        { id: 1, name: 'jack', age: 20, gender: 'boy' },
        { id: 2, name: 'lili', age: 20, gender: 'girl' },
        { id: 3, name: 'lucy', age: 20, gender: 'boy' },
      ]
    }
  },

  methods: {
    log(e) {
      console.log('hello', e);
    }
  }
}
</script>
